import React, { useState, useEffect } from 'react'

// import {stuList} from '../../services/students'
// import { useNavigate } from "react-router-dom";

export default function (props) {
    const [name,setName] = useState('')
    const [age,setAge] = useState('')
    const [gender,setGender] = useState('')
    const addStu = () => {
        props.toAdd({name,age,gender});
        setName('');
        setAge('');
        setGender('');
    }
    const inputName=(e) => setName(e.target.value);
    const inputAge=(e) => setAge(e.target.value);
    const inputGender=(e) => setGender(e.target.value);
    return (
        <div>
            <p>
                <label>姓名:&nbsp;</label>
                <input type='text'   style={{width:'250px'}} onChange={inputName} value={name}/>
            </p>
            <p>
                <label>年龄:&nbsp;</label>
                <input type='text'  style={{width:'250px'}} onChange={inputAge} value={age}/>
            </p>
            <p>
                <label forhtml='sex'>性别:&nbsp;&nbsp;&nbsp;</label>
                男&nbsp;&nbsp;<input type="radio" name="sex" value='male' onChange={inputGender}/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                女&nbsp;&nbsp;<input type="radio" name="sex" value='female' onChange={inputGender}/>
            </p>
            <button style={{ width: '100%', height: '30px', border: '2px solid skyblue' }} onClick={addStu}>添加学生</button>
        </div>
    )

}
